<template>
  <div>
    <!-- 表单搜索等功能 -->
    <div class="top-panel">
      <el-form :model="searchFormData" label-width="50px">
        <!-- 第一行 -->
        <el-row>
          <!--标题-->
          <el-col :span="4">
            <el-form-item label="标题">
              <el-input clearable placeholder="请输入标题" v-model.trim="searchFormData.titleFuzzy"
                @keyup.native="loadDataList"></el-input>
            </el-form-item>
          </el-col>
          <!--昵称-->
          <el-col :span="4">
            <el-form-item label="昵称" prop="nickNameFuzzy">
              <el-input clearable placeholder="请输入昵称" v-model.trim="searchFormData.titleFuzzy"
                @keyup.native="loadDataList"></el-input>
            </el-form-item>
          </el-col>
          <!--板块-->
          <el-col :span="4">
            <el-form-item label="板块">
              <el-cascader clearable :options="boardList" :props="boardProps" v-model="searchFormData.boardIds"
                placeholder="请选择板块" :style="{ width: '100%' }"></el-cascader>
            </el-form-item>
          </el-col>
          <!-- 附件 -->
          <el-col :span="4">
            <el-form-item label="附件">
              <el-select v-model="searchFormData.attachmentType" clearable placeholder="请选择附件"
                :style="{ width: '100%' }">
                <el-option label="有附件" :value="1"></el-option>
                <el-option label="无附件" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 状态 -->
          <el-col :span="4">
            <el-form-item label="状态">
              <el-select v-model="searchFormData.status" clearable placeholder="请选择状态" :style="{ width: '100%' }">
                <el-option label="已审核" :value="1"></el-option>
                <el-option label="待审核" :value="0"></el-option>
                <el-option label="已删除" :value="-1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <!-- 置顶 -->
          <el-col :span="4">
            <el-form-item label="置顶">
              <el-select v-model="searchFormData.topType" clearable placeholder="请选择" :style="{ width: '100%' }">
                <el-option label="置顶" :value="1"></el-option>
                <el-option label="未置顶" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="4" :style="{ 'padding-left': '10px' }">
            <el-button-group :style="{ width: '240px' }">
              <el-button type="primary" @click="loadDataList">搜索</el-button>
              <el-button type="success" @click="auditBatch" :disabled="selectBatchList.length == 0">批量审批</el-button>
              <el-button type="danger" @click="delBatch" :disabled="selectBatchList.length == 0">批量删除</el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-list">
      <!-- 表格展示 -->
      <Table ref="tableRef" :columns="columns" :dataSource="tableData" :fetch="loadDataList" :options="tableOptions"
        @rowSelected="setRowSelected">
        <!-- 用户信息 -->
        <template #userInfo="{ index, row }">
          <div class="user-info">
            <Avatar :userId="row.userId" :width="50"></Avatar>
            <div class="name-info">
              <div>
                <a :href="`${proxy.globalInfo.webDomain}user/${row.userId}`" class="a-link" target="_blank">{{
                  row.nickName }}</a>
              </div>
              <div>{{ row.userIpAddress }}</div>
            </div>
          </div>
        </template>
        <!-- 封面 -->
        <template #cover="{ index, row }">
          <Cover :cover="row.cover"></Cover>
        </template>
        <!-- 标题 -->
        <template #titleInfo="{ index, row }">
          <a class="a-link" target="_blank" tag="a" :href="`${proxy.globalInfo.webDomain}post/${row.articleId}`">{{
            row.title }}</a>
        </template>
        <!-- 板块 -->
        <template #boardInfo="{ index, row }">
          <div>
            <span>{{ row.pBoardName }}</span>
            <span v-if="row.boardName">/{{ row.boardName }}</span>
          </div>
        </template>
        <!-- 互动信息 -->
        <template #interationInfo="{ index, row }">
          <div>阅读：{{ row.readCount }}</div>
          <div>点赞：{{ row.goodCount }}</div>
          <div>
            评论：<span>{{ row.commentCount }}</span>
            <span class="a-link" :style="{ 'margin-left': '5px' }" @click="showComment(row.articleId)"
              v-if="row.commentCount">查看</span>
          </div>
        </template>
        <!-- 附件 -->
        <template #attachmentInfo="{ index, row }">
          <div v-if="row.attachmentType == 0">无附件</div>
          <div v-if="row.attachmentType == 1">
            <span @click="showAttachment(row.nickNam, row.articleId)" class="a-link">
              查看附件
            </span>
          </div>
        </template>
        <!-- 状态 -->
        <template #statusInfo="{ index, row }">
          <div v-if="row.status == -1" :style="{ color: 'red' }">已删除</div>
          <div v-if="row.status == 0" :style="{ color: 'red' }">待审核</div>
          <div v-if="row.status == 1" :style="{ color: 'green' }">已审核</div>
          <div v-if="row.topType == 0" :style="{ color: 'green' }">未置顶</div>
          <div v-if="row.topType == 1" :style="{ color: 'green' }">已置顶</div>
        </template>
        <!-- 操作 -->
        <template #op="{ index, row }">
          <div class="op" v-if="row.status != -1">
            <el-dropdown trigger="click">
              <span class="iconfont icon-more"></span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="updateBoard(row)">修改板块</el-dropdown-item>
                  <el-dropdown-item @click="topArticle(row)"
                    v-if="row.topType == 1 && row.status == 1">取消置顶</el-dropdown-item>
                  <el-dropdown-item @click="topArticle(row)"
                    v-if="row.topType == 0 && row.status == 1">置顶</el-dropdown-item>
                  <el-dropdown-item @click="delArticle(row)">删除</el-dropdown-item>
                  <el-dropdown-item @click="audit(row)" v-if="row.status == 0">审核</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </Table>
    </div>
    <!-- 修改板块 -->
    <ArticleBoard ref="articleBoardRef" @reload="loadDataList" />
    <!-- 查看附件 -->
    <ArticleAttachment ref="articleAttachmentRef"></ArticleAttachment>
    <!-- 查看评论 -->
    <ArticleComment ref="commentRef"></ArticleComment>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import ArticleBoard from './ArticleBoard.vue';
import ArticleAttachment from './ArticleAttachment.vue';
import ArticleComment from './ArticleComment.vue';
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const api = {
  loadDataLoist: "/forum/loadArticle",
  loadBoard: "/board/loadBoard",
  auditArticle: '/forum/auditArticle',
  topArticle: "/forum/topArticle",
  delArticle: "/forum/delArticle",
}

// 搜索
const searchFormData = ref({})

// 板块信息
const boardProps = {
  multiple: false,
  checkStrictly: true,
  value: 'boardId',
  label: 'boardName'
}
const boardList = ref([])

//获取板块数据
const loadBoardList = async () => {
  let result = await proxy.request({
    url: api.loadBoard
  })
  if (!result) {
    return
  }
  boardList.value = result.data
}
loadBoardList();

//批量选择
const selectBatchList = ref([])
const setRowSelected = (rows) => {
  selectBatchList.value = []
  //循环遍历选择的每一行数据 添加到selectBatchList中
  rows.forEach(elemnt => {
    selectBatchList.value.push(elemnt.articleId)
  })
}

//表格的配置
const tableOptions = ref({
  selectType: "checkbox",
  extHeight: 130
})

// 自定义的表格配置数据列
const columns = [
  {
    label: "用户信息",
    prop: "avatar",
    width: 200,
    scopedSlots: "userInfo", //插槽名字
  },
  {
    label: "封面",
    prop: "cover",
    width: 100,
    scopedSlots: "cover",
  },
  {
    label: "标题",
    scopedSlots: "titleInfo",
  },
  {
    label: "板块",
    width: 200,
    scopedSlots: "boardInfo",
  },
  {
    label: "互动信息",
    width: 150,
    scopedSlots: "interationInfo",
  },
  {
    label: "是否有附件",
    prop: "attachment",
    width: 100,
    scopedSlots: "attachmentInfo",
  },
  {
    label: "状态",
    prop: "status",
    width: 100,
    scopedSlots: "statusInfo",
  },
  {
    label: "发布时间",
    prop: "postTime",
    width: 180,
  },
  {
    label: "操作",
    prop: "op",
    width: 80,
    scopedSlots: "op",
  },
]

// 表格数据
const tableData = ref([])

// 加载表格
const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize
  }

  //拷贝数据
  Object.assign(params, searchFormData.value)

  //处理板块数据字段
  if (params.boardIds && params.boardIds.length == 1) {
    params.pBoardId = params.boardIds[0]
  } else if (params.boardIds && params.boardIds.length > 1) {
    params.pBoardId = params.boardIds[0]
    params.boardId = params.boardIds[1]
  }

  //删除没用的字段
  delete params.boardIds

  let result = await proxy.request({
    url: api.loadDataLoist,
    params: params
  })

  if (!result) return
  tableData.value = result.data
}

//修改板块
const articleBoardRef = ref()
const updateBoard = (data) => {
  articleBoardRef.value.updateBoard(data)
}

//表格的ref
const tableRef = ref()

//批量审核
const auditBatch = () => {
  proxy.Confirm(`你确定要批量审核嘛？`, async () => {
    let result = await proxy.request({
      url: api.auditArticle,
      params: {
        articleIds: selectBatchList.value.join(",")
      }
    })

    if (!result) return
    tableRef.value.clearSelection()

    loadDataList()
  })
}

//批量删除
const delBatch = () => {
  proxy.Confirm(`你确定要批量删除嘛？`, async () => {
    let result = await proxy.request({
      url: api.delArticle,
      params: {
        articleIds: selectBatchList.value.join(",")
      }
    })

    if (!result) return
    tableRef.value.clearSelection()

    loadDataList()
  })
}

//审批
const audit = (data) => {
  proxy.Confirm(`你确定要审核【${data.title}】吗？`, async () => {
    let result = await proxy.request({
      url: api.auditArticle,
      params: {
        articleIds: data.articleId,
      }
    })
    if (!result) {
      return;
    }
    tableRef.value.clearSelection();
    loadDataList()
  })
}

//删除
const delArticle = (data) => {
  proxy.Confirm(`你确定要删除${data.title}吗？`, async () => {
    let result = await proxy.request({
      url: api.delArticle,
      params: {
        articleIds: data.articleId,
      }
    })
    if (!result) {
      return;
    }
    tableRef.value.clearSelection();
    loadDataList()
  })
}

//顶置
const topArticle = (data) => {
  let opName = data.topType == 0 ? "设为顶置" : "取消顶置"
  proxy.Confirm(`你确定将【${data.title}】${opName}吗？`, async () => {
    let result = await proxy.request({
      url: api.topArticle,
      params: {
        topType: data.topType == 0 ? 1 : 0,
        articleId: data.articleId
      }
    })
    if (!result) return
    tableRef.value.clearSelection()
    loadDataList()
  })
}

//查看附件
const articleAttachmentRef = ref()
const showAttachment = (nickName, articleId) => {
  articleAttachmentRef.value.show(nickName, articleId)
}

//查看评论
const commentRef = ref()
const showComment = (articleId) => {
  commentRef.value.show(articleId)
}

</script>

<style scoped lang="scss">
.data-list {
  .user-info {
    display: flex;
    align-items: center;

    .name-info {
      margin-left: 5px;
      font-size: 13px;
    }
  }

  .op {
    .iconfont {
      cursor: pointer;
    }
  }
}
</style>